@(projectId: Long, testSuiteForm: Form[Resource])

@import play.i18n._

@css = {
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/testsuites/add.min.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/codemirror/codemirror.css")" />
	<link rel="stylesheet" type="text/css" href="@routes.Assets.at("css/codemirror/theme/eclipse.css")" />
}

@scripts = {
	<script src="@routes.Assets.at("js/codemirror/codemirror.js")"></script>
	<script src="@routes.Assets.at("js/codemirror/mode/properties/properties.js")"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			var textarea = document.getElementById('test-suite-content');
			var propertiesEditor = CodeMirror.fromTextArea(textarea, {
				lineNumbers: true,
				mode: 'properties',
				theme: 'eclipse'
			});
		});
	</script>
}

@main(Messages.get("view.testsuites.page.add.title"), css, scripts) {
	
	<div class="resource-form resource-form-2-column">
		@helper.form(action = routes.TestSuites.createTestSuite(projectId)) { 
			
			<div class="column">
				@helper.inputText(testSuiteForm("name"), '_label -> Messages.get("view.testsuites.form.name.label"), '_help -> Messages.get("view.testsuites.form.name.help"))
				
				@helper.textarea(testSuiteForm("description"), '_label -> Messages.get("view.testsuites.form.desc.label"), '_help ->  Messages.get("view.testsuites.form.desc.help"), 'class -> "input-description")
			</div>
			
			<div class="column">
				@helper.textarea(testSuiteForm("test-suite-content"), '_label -> Messages.get("view.testsuites.form.content.label"), 'cols -> 50, 'rows -> 10)
			</div>
			
			<div class="column-wide">
				<input type="submit"  value="@Messages.get("view.testsuites.form.add.label")" />
				<a href="@routes.TestSuites.listTestSuites(projectId)" title="@Messages.get("view.common.cancel.label")"><button type="button">@Messages.get("view.common.cancel.label")</button></a>
			</div>
			
		}
		
		<div class="clear-right"></div>
	</div>
	
}
